<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <!-- <go-back :aa="preurl"></go-back> -->
          <headerBack></headerBack>
          <div class="mainDiv">
            <div class="catalogNameTitle">
              <h3>{{ catalogName }}</h3>
              <p>专业类代码 {{ catalogCode }}</p>
            </div>
            <ul class="major_list">
              <li class="major_item" v-for="(item, index) of majorList" :key="index" @click="jumpToDetail(item.major_code)">
                <div class="majorMsg">
                  <b>{{ item.major_name }}</b>
                  <span>{{ item.major_code }}</span>
                </div>
                <div class="imgIcon">
                  <img src="~/static/images/collage_icon_arrow_right.png">
                </div>
              </li>
            </ul>
          </div>
          <div style="width: 100%;height: 1.6rem;"></div>
        </div>
      </scroller>
    </div>
  </div>
  <!-- <div>这是专业库跳转列表</div>   -->
</template>

<script>
  import headerBack from '~/components/headerBack'
  import ls from 'store2';
  import { getmajorlistbyname } from '~/api/repository'
  export default {
    components: {
      headerBack
    },
    data() {
      return {
        preurl:ls.get('preUrl'),
        catalogName: null, // 专业类名称
        catalogCode: null, // 专业类代码
        majorList: [], // 专业列表
        majorsCount: null, // 专业列表数量
      }
    },
    mounted() {
      this.catalogName = this.$store.state.sendMsg;
      this.getCatalogDetail();
      if (ls.get('preUrl') == '../professional/catalogList') {
        this.preurl = this.$store.state.catalogListUrl
      } else {
        this.$store.commit('changeCatalogListUrl', this.preurl)
        ls.set('preUrl','../professional/catalogList')
      }
    },
    methods: {
      getCatalogDetail() {
        getmajorlistbyname({ catalog_name: this.catalogName }).then(res => {
          if (res.code == 200) {
            const data = res.data[0];
            this.catalogCode = data.catalog_code;
            this.majorList = data.majors;
            this.majorsCount = data.majors_count;
          }
        })
      },
      jumpToDetail(majorCode) {
        let params = {
          code: majorCode,
          typeId: ls.get('userType').toString()
        }
        this.goto('/professional/detail', JSON.stringify(params));
      },
      goto(routerName, queryData) {
        this.$router.replace({
          path: routerName,
          query: {
            type: queryData
          }
        });
      },
    },
  }
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    /deep/ .top {
      background: #FFF; 
    }
    .mainDiv {
      .catalogNameTitle {
        background: #FFF; 
        padding: 0.32rem 0.3rem;
        margin-bottom: 0.2rem;
        h3 {
          color: #222;
          font-size: 0.4rem;
          font-weight: bold;
          letter-spacing: 2px;
          margin-bottom: 0.1rem;
        }
        p {
          color: #999;
          font-size: 0.28rem;
        }
      }
      .major_list {
        background: #fff;
        list-style: none;
        padding: 0 0.3rem;
        .major_item {
          border-bottom: 2px solid #EEE;
          width: 100%;
          height: 1.2rem;
          padding: 0 0.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .majorMsg {
            display: flex;
            align-items: center;
            b {
              color: #222;
              font-size: 0.3rem;
            }
            span {
              margin-left: 0.2rem;
              color: #999;
              font-size: 0.22rem;
            }
          }
          .imgIcon {
            width: 0.4rem;
            height: 0.4rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }    
</style>
